<template>
  <div class="audio-container">
    <!-- 原生audio -->
    <audio
      preload
      ref="audio"
      class="audio-html"
      controls
      @canplay="canplayHandle"
      @play="playHandle"
      @pause="pauseHandle"
      @timeupdate="timeupdateHandle"
      @ended="endedHandle"
    >
      <source src="" ref="audioSource" />
    </audio>
    <div class="my-audio">
      <div class="my-control-group">
        <div class="controls">
          <span @click="preSong">
            <el-icon :size="32" color="#0ca986"> <arrow-left-bold /> </el-icon>
          </span>
          <span v-show="!isPlay" @click="playBtn">
            <el-icon :size="32" color="#0ca986" class="play-icon">
              <caret-right />
            </el-icon>
          </span>
          <span v-show="isPlay" @click="pauseBtn">
            <el-icon :size="32" color="#0ca986">
              <video-pause />
            </el-icon>
          </span>
          <span @click="nextSong">
            <el-icon :size="32" color="#0ca986"> <arrow-right-bold /> </el-icon>
          </span>
          <div class="time">
            {{ currentTimeStr ? currentTimeStr : '00:00' }} /{{
              durationStr ? durationStr : '00:00'
            }}
          </div>
          <play-list />
        </div>
        <div class="slider">
          <el-slider
            v-model="sliderValue"
            @change="silderChange(sliderValue)"
            @input="silderInput(sliderValue)"
          ></el-slider>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import emitter from '@/utils/mitt/eventbus'
import playList from '../play-list/play-list.vue'
import musicFormat from '../utils/index'
import localCache from '@/utils/cache'

export default defineComponent({
  components: { playList },
  setup() {
    let playUrl = ref(null)
    let isPlay = ref(false)
    let canPlay = ref(false)
    const audio = ref<any>(null)
    const audioSource = ref<any>(null)
    const durationStr = ref('')
    const currentTimeStr = ref('')
    const sliderValue = ref(0)
    const currentIndex = ref(0)
    const playList = ref<any>([])
    /* 响应获取播放用的url事件，获取url，播放 */
    emitter.on('getSongUrl', (songUrl: any): void => {
      playUrl.value = songUrl
      audioSource.value.src = playUrl.value
      audio.value.load()
      audio.value.play()
    })
    /* 组件挂载完毕获取一下缓存中的歌曲 */
    onMounted(() => {
      playUrl.value = localCache.getCache('currentUrl')
      audioSource.value.src = playUrl.value
      audio.value.load()
    })
    /* 切换为上一首 */
    const preSong = () => {
      playList.value = localCache.getCache('playList')?.playCacheList
      audio.value.pause()
      currentIndex.value++
      if (currentIndex.value > playList.value.length) {
        /* 没歌了 */
        audio.value.pause()
        return
      }
      audioSource.value.src = playList.value[currentIndex.value]
      audio.value.load()
      audio.value.play()
      /* 发起歌曲正在播放事件，切换歌曲名字和歌词 */
      emitter.emit('isPlaying', currentIndex.value)
    }
    /* 播放按钮 */
    const playBtn = (): void => {
      audio.value.play()
      isPlay.value = true
    }
    /* 暂停按钮 */
    const pauseBtn = (): void => {
      audio.value.pause()
      isPlay.value = false
    }
    /* 切换为下一首 */
    const nextSong = () => {
      playList.value = localCache.getCache('playList')?.playCacheList
      audio.value.pause()
      if (currentIndex.value > 0) {
        currentIndex.value--
        audioSource.value.src = playList.value[currentIndex.value]
        audio.value.load()
        audio.value.play()
        emitter.emit('isPlaying', currentIndex.value)
      } else {
        /* 没歌了 */
        return false
      }
    }
    /* 歌曲准备就绪 */
    const canplayHandle = () => {
      canPlay.value = true
      /* 获取歌曲总时长 */
      durationStr.value = musicFormat.timeFormat(audio.value.duration)
    }
    /* 滚动条控制 */
    const silderChange = (sliderValue: number) => {
      if (canPlay.value) {
        /* 获取当前播放时间 */
        audio.value.currentTime = Math.floor(
          (sliderValue / 100) * audio.value.duration
        )
      }
      /* 发起滚动事件，更改歌词展示部分 */
      emitter.emit('scoll', sliderValue)
    }
    const silderInput = (sliderValue: number) => {
      /* 发起滚动事件，更改歌词展示部分 */
      emitter.emit('scoll', sliderValue)
    }
    /* 播放开始事件 */
    const playHandle = () => {
      isPlay.value = true
    }
    /* 播放中 一直会触发*/
    const timeupdateHandle = () => {
      /* 滚动条滚动 */
      sliderValue.value = Math.floor(
        (audio.value.currentTime / audio.value.duration) * 100
      )
      /* 当前播放时间变化 */
      currentTimeStr.value = musicFormat.timeFormat(audio.value.currentTime)
    }
    /* 暂停事件 */
    const pauseHandle = () => {
      isPlay.value = false
    }
    /* 播放完毕 */
    const endedHandle = () => {
      /* 下一首或上一首 */
      nextSong() || preSong()
    }

    return {
      audio,
      audioSource,
      preSong,
      playBtn,
      pauseBtn,
      nextSong,
      playUrl,
      sliderValue,
      isPlay,
      canPlay,
      canplayHandle,
      playHandle,
      timeupdateHandle,
      pauseHandle,
      endedHandle,
      durationStr,
      currentTimeStr,
      silderChange,
      silderInput
    }
  }
})
</script>

<style scoped lang="less">
.audio-container {
  height: 90px;
  width: 100%;
  position: absolute;
  bottom: 0;
  .audio-html {
    position: absolute;
    opacity: 0;
    z-index: -1;
  }
  .my-audio {
    width: 100%;
    padding: 0 10px;
    color: #fff;
    background: rgb(27, 27, 27);

    .my-control-group {
      display: flex;
      align-items: center;

      .controls {
        height: 50px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        span {
          display: inline-block;
          border-radius: 50px;
          transition: all ease 0.6s;
          &:hover {
            transform: scale(1.1);
          }
          .play-icon {
            border-radius: 50%;
            border: 1px solid #0ca986;
          }
        }
      }
      .slider {
        flex: 1;
        margin: 0 0 0 0.3rem;
      }
      .time {
        width: 90px;
        color: rgb(219, 219, 219);
        font-size: 14px;
      }
    }
  }
}
</style>
